// 支付页面
<template>
  <div class="pay-car-rent-wrap">
    <van-nav-bar
      title="收银台"
      left-arrow
      @click-left="onClickLeft"
      class="animate__fadeInDown animate__animated"
    />
    <div class="pay-in-advance">
      <div class="header">预付租金</div>
      <div class="middle">
        <span class="first">￥</span>
        <span class="second">{{ this.$store.state.order.totalPrice }}</span>
      </div>
      <div class="footer">
        <div>距离支付结束还有:</div>
        <van-count-down :time="time" format="mm 分 ss 秒" auto-start />
      </div>
    </div>
    <van-cell-group inset>
      <van-cell>
        <template #title>
          <div class="left">
            <img src="../../assets/image/weixin.png" alt="" />
            <span>微信支付</span>
          </div>
        </template>
        <template #default>
          <span @click="clickWx">
            <i v-if="!wx" class="iconfont icon-weixuanzhong"></i>
            <i v-else class="iconfont icon-31xuanzhong active"></i>
          </span>
        </template>
      </van-cell>
      <van-cell>
        <template #title>
          <div class="left">
            <img src="../../assets/image/alipay.png" alt="" />
            <span>微信支付</span>
          </div>
        </template>
        <template #default>
          <span @click="clickZfb">
            <i v-if="!zfb" class="iconfont icon-weixuanzhong"></i>
            <i v-else class="iconfont icon-31xuanzhong active"></i>
          </span>
        </template>
      </van-cell>
    </van-cell-group>
    <van-button type="warning" size="large" color="#ff3f34" @click="payMoney"
      >立即支付</van-button
    >
    <!-- 退出支付弹出框 -->
    <van-overlay :show="show" @click="show = false">
      <no-pay-popup class="no-pay-popup" />
    </van-overlay>
    <!-- 退出支付弹出框 -->
  </div>
</template>

<script>
import NoPayPopup from "../../components/NoPayPopup.vue";

export default {
  components: { NoPayPopup },
  data() {
    return {
      // 控制是否显示遮罩层
      show: false,
      time: 15 * 60 * 1000,
      // 默认为微信支付
      wx: true,
      // 选择支付宝支付
      zfb: false,
    };
  },
  methods: {
    onClickLeft() {
      this.show = true;
    },
    // 点击微信支付
    clickWx() {
      this.wx = !this.wx;
      this.zfb = false;
    },
    // 点击支付宝支付
    clickZfb() {
      this.zfb = !this.zfb;
      this.wx = false;
    },
    // 点击支付
    payMoney() {
      this.$toast.loading("支付中");
      setTimeout(() => {
        this.$toast.success("支付成功");
        this.$router.push("/order");
      }, 500);
      // 支付成功
      this.$store.commit("order/changeProgressFinish",true)
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-car-rent-wrap {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  position: relative;
  .pay-in-advance {
    background: white;
    height: 150px;
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 0;
    .header {
      color: #969696;
      font-size: 14px;
    }
    .middle {
      color: #f04c42;
      height: 32px;
      line-height: 32px;
      .first {
        font-size: 15px;
        font-weight: 700;
        margin-right: 5px;
      }
      .second {
        font-size: 24px;
        font-weight: 700;
      }
    }
    .footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 30px;
      .van-count-down {
        color: #f04c42;
        margin-top: 10px;
      }
    }
  }
  .van-cell-group {
    margin: unset;
    .van-cell {
      height: 60px;
      align-items: center;
      .van-cell__title {
        .left {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            margin-right: 5px;
          }
        }
      }
      .van-cell__value {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .iconfont {
          font-size: 28px;
        }
        i.active {
          color: #ff3f34;
        }
      }
    }
  }
  .van-button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .no-pay-popup {
    position: absolute;
    top: 248.5px;
    left: 67.5px;
  }
}
</style>